<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./js/vue.js"></script>
    <title>卡片</title>
  </head>
  <body>
    <div id="root1">
      <!-- 卡片就是遍历div -->
    <div class="card" v-for="(item,index) in cards" :key="index">
      <div class="card-header">{{item.a}}</div>
      <div class="card-body">
       {{item.b}}
      </div>
      <div class="card-footer">{{item.c}}</div>
    </div>
    </div>
    <script>
        new Vue({
        el: '#root1',
        data: {
        cards:[
            {a:1,b:2,c:3},
    {a:1,b:2,c:3},
{a:1,b:2,c:3}]
        },
        methods:{
        
        }
        })
    </script>

    <style scoped>
      .card {
        width: 300px; /* 宽度 */
        border: 1px solid #ccc; /* 边框 */
        border-radius: 8px; /* 边框圆角 */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
        margin: 20px; /* 外边距 */
        overflow: hidden; /* 防止内容溢出 */
      }

      .card-header,
      .card-body,
      .card-footer {
        padding: 10px; /* 内边距 */
      }

      .card-header {
        background-color: #f2f2f2; /* 头部背景色 */
        font-weight: bold; /* 字体加粗 */
      }

      .card-footer {
        background-color: #f9f9f9; /* 底部背景色 */
        text-align: right; /* 文本右对齐 */
      }
    </style>
  </body>
</html>
